<template>
  <div class="header gradient">
    <div class="headtop flexrow">
        <div class="headlogo flexrow">
            <img src="@/assets/images/logo.png" alt="">
            <span>昌友税法查询系统</span>  
            <head-info @func="esclogin" :token="token" :username="username" :remaindays="remain_days"></head-info>       
      </div>
       <div class="blank"></div>
    	<div class="headright flexrow">
       <!--  <span @click="linkdiolage">网站</span> -->
        <span @click="goweb">官网</span>
        <span @click="helpdiolage">帮助</span>
        <span @click="aboutdiolage">关于</span>
        <i class="iconfont iconzuixiaohua" @click="min"></i>
        <i class="iconfont iconguanbi"  @click="close"></i>
    	</div>

    </div>
    <div class="headmenu flexrow">
      	<div class="headtab flexrow">
      		<router-link to="/" class="tabitem flexcol" active-class="active" >
      			<div class="circlebox cir1">
      			   <div class="bg-home"></div>
      			</div>
      			<div class="tabfont">首页</div>
      		</router-link>
      		<router-link to="/law"  class="tabitem flexcol" active-class="active" >
      			<div class="circlebox cir2">
              <div class="bg-pin"></div>
      			</div>
      			<div class="tabfont">法规查询</div>
      		</router-link>
          
      		<div class="tabitem flexcol" :plain="true" @click="message">
      			<div class="circlebox cir3">
      			  <div class="bg-ser"></div>
      			</div>
      			<div class="tabfont">发票查询</div>
      		</div>
      		<router-link to="/recommend" class="tabitem flexcol" active-class="active" >
      			<div class="circlebox cir4">
      			 <div class="bg-doc"></div>
      			</div>
      			<div class="tabfont">文件推荐</div>
      		</router-link>
          <router-link :to="{name: 'UserPay'}" class="tabitem flexcol" active-class="active">
            <div class="circlebox cir5">
             <div class="bg-card"></div>
            </div>
            <div class="tabfont" >充值</div>
          </router-link>
          
      	</div>
        <div class="blank"></div>
      	<div class="headuser flexrow">
         <div v-if="!token" class="usrbtn flexrow" @click="login = true">
            <div class="bg-user"></div>用户登录
          </div>
      		<div v-if="!token" class="usrbtn flexrow" @click="register= true">
            <div class="bg-write"></div>用户注册
          </div>
      		<router-link to="/Advice"  class="usrbtn flexrow" ><div class="bg-msg"></div>用户答疑</router-link>	
      	</div>

        <el-dialog title="登录" :visible.sync="login" class="dialogbox" :close-on-click-modal="false" center>
            <el-form :model="form1" :rules="rules1"  ref="form1">
                <el-form-item prop="name" :error="errorname1">
                    <el-input v-model="form1.name" autocomplete="off" placeholder="请输入用户名">
                      <i slot="prefix" class="iconfont iconuser"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password" :error="errorpass1">
                    <el-input v-model="form1.password" autocomplete="off" placeholder="请输入密码" show-password>
                      <i slot="prefix" class="iconfont iconlock"></i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="verify"  :error="errorver1">
                    <el-row :gutter="10">
                      <el-col :span="15">
                          <el-input v-model="form1.verify" autocomplete="on" placeholder="请输入图片验证码"></el-input>
                      </el-col>
                      <el-col :span="9">
                        <div class="codebox">
                          <img src="http://app.yejianping.cn/api/Base/captcha" onClick="this.src=this.src+'?X-CSRF-TOKEN=bd72e9b4f8c672f2145973c783ed4a1e&'+Math.random()" alt="点击刷新验证码">
                        </div>
                      </el-col>
                    </el-row>
                </el-form-item>
                <div class="formtip smallfont">
                  <span  @click="changeopen">忘记密码</span>
                  <span  @click="registeropen">注册账号</span>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button class="bluebtn formbtn" @click="submit('form1')">立即登录</el-button>
            </div>
        </el-dialog>

         <el-dialog title="注册" :visible.sync="register" class="dialogbox" :close-on-click-modal="false" center>
            <el-form :model="form2"  :rules="rules2"  ref="form2">
              <el-form-item prop="name" :error="errorname2">
                <el-input v-model="form2.name" autocomplete="off" placeholder="请输入用户名">
                  <i slot="prefix" class="iconfont iconuser"></i>
                </el-input>
              </el-form-item>
              <el-form-item prop="email" :error="erroremail2">
                <el-input v-model="form2.email" autocomplete="off" placeholder="请输入邮箱">
                  <i slot="prefix" class="iconfont iconemailbox"></i>
                </el-input>
              </el-form-item>
              <el-form-item prop="pass">
                <el-input v-model="form2.pass" autocomplete="off" placeholder="请输入密码" show-password>
                <i slot="prefix" class="iconfont iconlock"></i>
                </el-input>    
              </el-form-item>
              <el-form-item prop="checkpass">
                 <el-input v-model="form2.checkpass" autocomplete="off" placeholder="请再次输入密码" show-password>
                   <i slot="prefix" class="iconfont iconlock"></i>
                 </el-input>
              </el-form-item>
                <span class="smallfont" @click="loginopen">已有账号</span>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button class="bluebtn formbtn" @click="onregister('form2')">立即注册</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改密码" :visible.sync="change" class="dialogbox" center>
            <el-form :model="form3" :rules="rules3"  ref="form3">
              <el-form-item prop="email" :error="erroremail3">
                <el-input v-model="form3.email" autocomplete="off" placeholder="请输入邮箱">
                  <i slot="prefix" class="iconfont iconemailbox"></i>
                </el-input>
              </el-form-item>
              <el-form-item prop="emailcode"  >
                    <el-row :gutter="10">
                      <el-col :span="15">
                          <el-input v-model="form3.emailcode" autocomplete="on" placeholder="请输入邮箱验证码"></el-input>
                      </el-col>
                      <el-col :span="9">
                        <div class="codebtn" @click="sendemail($event)">
                          点击发送
                        </div>
                      </el-col>
                    </el-row>
                </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="form3.password" autocomplete="off" placeholder="请输入密码">
                  <i slot="prefix" class="iconfont iconlock"></i>
                </el-input>
              </el-form-item>
             <!--  <el-form-item prop="verify">
                <el-row :gutter="10">
                  <el-col :span="15">
                      <el-input v-model="form3.verify"  autocomplete="on" placeholder="请输入图片验证码"></el-input>
                  </el-col>
                  <el-col :span="9">
                    <div class="codebox">
                          <img src="http://app.yejianping.cn/api/Base/captcha" onClick="this.src=this.src+'?X-CSRF-TOKEN=bd72e9b4f8c672f2145973c783ed4a1e&'+Math.random()" alt="点击刷新验证码">
                        </div>
                  </el-col>
                </el-row>
              </el-form-item> -->
                <div class="formtip smallfont">
                  <span @click="loginopen">已有账号</span>
                  <span @click="registeropen">立即注册</span>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button class="bluebtn formbtn" @click="onchange('form3')">确定</el-button>
            </div>
        </el-dialog>

    <el-dialog   :visible.sync="link" class="notedia" center>
      <p slot="title" class="dialog-title">
          叶建平财税工作室
        </p>
        <div  v-loading="loading">
          <iframe src="http://www.yejianping.cn/" width="950px" height="600px" style="overflow: hidden; border:none;"
          ></iframe>
        </div>
    </el-dialog>

        <el-dialog  :visible.sync="help" class="notedia" center>
              <p slot="title" class="dialog-title">
                {{title1}}
              </p>
               <p class="subtitle">发布时间：{{time1}}</p>
               <div v-html="content1">
                  {{content1}}
              </div>
        </el-dialog>

        <el-dialog   :visible.sync="about" class="notedia" center>
              <p slot="title" class="dialog-title">
                {{title2}}
              </p>
              <p class="subtitle">发布时间：{{time2}}</p>
               <div v-html="content2">
                  {{content2}}
              </div>
        </el-dialog>
    </div>
  </div>
</template>

<script>
  import HeadInfo from './headinfo'
  import axios from 'axios'
  import storage from '../../storage/index'

  const { ipcRenderer } = require("electron");

  export default {
    name: 'HomeHeader',
    components: {
      HeadInfo
    },
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.form2.checkPass !== '') {
            this.$refs.form2.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.form2.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        downloadUrl:localStorage.getItem("downloadUrl"),
        token:localStorage.getItem("access_token"),
        username:localStorage.getItem("username"),
        remain_days:localStorage.getItem("remain_days"),
        link:false,
        loading:true,
        help:false,
        title1:'',
        time1:'',
        content1:'',
        about:false,
        title2:'',
        time2:'',
        content2:'',
        login: false,
        register:false,
        change:false,
        form1: {
          name:'',
          password:'',
          verify:''
        },
        errorname1:'',
        errorpass1:'',
        errorver1:'',
        form2: {
          name: '',
          email:'',
          pass: '',
          checkpass: ''
        },
        errorname2:'',
        erroremail2:'',
        form3: {
          email: '',
          emailcode:'',
          password: ''
        },
        erroremail3:'',
        rules1: {
          name: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
          ],
          password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
          ],
          verify:[
            { required: true, message: '请输入验证码', trigger: 'blur'}
          ]
        },
        rules2: {
          name: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
          ],
          pass: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' },
            { validator: validatePass, trigger: 'blur' }
          ],
          checkpass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ]
        },
        rules3: {
          email: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
          ],
          verify:[
            { required: true, message: '请输入验证码', trigger: 'blur'}
          ]
        }
      }
    },
    computed:{
      // token(){
      //   //return this.$store.state.token 
      //   return local.getItem("access_token")
      // },
      // username(){           
      //   return this.$store.state.username         
      // }
    },
    methods: {
      linkdiolage(){
        this.link = true
        setTimeout(() => {
          this.loading = false;
        }, 2000);

      },
      goweb(){
          const shell = require('electron').shell
          shell.openExternal('http://www.yejianping.cn/')
        },
      helpdiolage(){
            this.help=true
            axios.get('/about/detail?id=2')
                .then((res)=>{
                res = res.data
               if (res.status==200) {
                console.log(data)
                  const data = res.msg
                    this.title1= data.title
                    this.time1 = data.create_time.substring(0,10)
                    this.content1=data.content
            }
                })            
          },
          aboutdiolage(){
            this.about=true
            axios.get('/about/detail?id=1')
                .then((res)=>{
                res = res.data
               if (res.status==200) {
                console.log(res)
                  const data = res.msg
                  this.title2= data.title
                  this.time2 = data.create_time
                    this.content2=data.content  
            }
                })            
          },
          changeopen(){
          this.login = false
          this.register = false
          this.change = true       
        },
        registeropen(){
          this.login = false
          this.change = false
          this.register = true
        },
        loginopen(){
          this.register = false
          this.change = false
          this.login = true
        },
         submit(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
                let username = this.form1.name;
                let password = this.form1.password;
                let verify = this.form1.verify;
                axios.post('/login/index',{
                  username,
                  password,
                  verify
                }).then((res)=>{
                    res = res.data;
                    var status = res.status;
                    switch (status) {
                        case 200:
                            const data = res.data;
                            var user = new Object;                          
                            this.token=data.access_token;
                            this.username=data.user.username;
                            this.remain_days= data.user.remain_days;
                            localStorage.setItem('access_token',data.access_token);
                            localStorage.setItem('username',data.user.username);
                            localStorage.setItem('remain_days',data.user.remain_days);
                            this.$emit('login')
                            //this.token=data.access_token
                            //this.$store.dispatch('saveToken',data.access_token);
                            //this.$store.dispatch('saveUserName',data.user.username);
                            //this.$store.dispatch('saveUserTime',data.user.remain_days);
                            this.login = false  ;
                            break;
                        case 420:
                            this.errorname1 = res.msg;
                            break;
                        case 421:
                            this.errorver1 = res.msg;
                            break;
                        case 422:
                            this.errorpass1 = res.msg;
                            break;
                    }                          
                });
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        }, 
        resetForm(formname) {
          this.$refs[formname].resetFields();
        },
        
        onregister(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
                let username = this.form2.name;
                let password = this.form2.pass;
                let email = this.form2.email;
                axios.post('/login/register',{
                  username,
                  password,
                  email
                }).then((res)=>{
                  res = res.data;
                  var status = res.status;
                  switch (status) {
                        case 200:
                            const data = res.data;
                            localStorage.setItem("access_token",data.access_token);
                            this.register = false ; 
                            this.loginmessage();
                            break;
                        case 420:
                            this.errorname2 = res.msg;
                            break;
                        case 423:
                            this.erroremail2 = res.msg;
                            break;
                    }                        
                });
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        onchange(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
                let email = this.form3.email;
                let password = this.form3.password;
                let code = this.form3.emailcode;
                axios.post('/login/resetPassword',{
                  email,
                  password,
                  code
                }).then((res)=>{
                  res = res.data;
                  var status = res.status;
                  switch (status) {
                        case 200:
                            alert('修改成功')
                            break;
                        case 423:
                            this.erroremail3 = res.msg;
                            break;
                    }                          
                });
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
       
        min(){
          ipcRenderer.send('min');
        },
        close(){           
          ipcRenderer.send('close');
        },
        message() {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: '<p>亲，该功能正在努力开发中，敬请期待!</p>',
            center:true,
            offset:300,
            duration:1000
          })
        },
         loginmessage() {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: '<p>亲，注册成功，请耐心等待审核！</p>',
            center:true,
            offset:300,
            duration:1000
          })
        },        
         esclogin(){
           this.$store.dispatch('reset');
            axios.post('/login/logout')
              .then((res)=>{
                localStorage.removeItem('access_token');
                this.token=0
                this.$emit('esc')
            });    
        },
        sendemail(e){         
          var time = 60;
          var timer = setInterval(function() {
            time--;
             e.target.innerText = time + "s";
            if(time == 0) {
              time = 60;
              e.target.innerText = "点击发送";
              clearInterval(timer);
            }
          }, 1000);
          let type = 'reset_passwd';
          let email = this.form3.email;
          axios.post('/base/getEmailCaptcha',{
                  email,
                  type
                }).then((res)=>{
                  res = res.data
                  if (res.status==200) {
                    alert('已发送')
                  }            
          });
        }
    }
  }
    
    
        
       
       
        
        
        
        
       
        
       
    
  
</script>

<style scoped>

.header{
	color:#fff;
  	padding:10px;


}
.headlogo img{
    width: 28px;
    height: 100%;
    margin-right: 10px;  
 }
.gradient{
    background-image: linear-gradient(to right,  #1E41DB 0%,#2079FB 100%);   
}

  .headtop {	
  	font-size: 14px;
  	letter-spacing:1px;
  	justify-content: space-between;
  }
 
  .bg-user {
    width: 16px; height: 16px;
    background: url('../../assets/css_sprites.png') -221px -52px;

}
.bg-msg {
    width: 17px; height: 15px;
    background: url('../../assets/css_sprites.png') -221px -88px;
}

.bg-write {
    width: 14px; height: 14px;
    background: url('../../assets/css_sprites.png') -221px -123px;
}


  .headright>span,.headright>i{
  	margin-left: 20px;
    cursor: pointer;
    
  }
.headright>span{
  display: inline-block;
  width: 35px;
  height: 20px;
  text-align: center;
}
  
  .headmenu{
  	color: #fff;
  	padding-top: 5px;
  	justify-content: space-between; 	
  }
  
  .tabitem{
  	width: 80px;
  	height: 80px;
  	text-align: center;
  	justify-content: center;
  }
  .circlebox{
  	width: 40px;
  	height: 40px;
  	border-radius: 50%;
  	margin:5px auto;
  }
  .active,.tabitem:hover,.headright>a:hover,.iconzuixiaohua:hover{
     background-image: linear-gradient(to bottom,rgba(31,72,220,0),rgba(29,66,203,1));
  }
  .iconguanbi,.iconzuixiaohua{
    width: 17px;
    height: 17px;
  }
  .iconguanbi:hover{
    background: red;
  }
  .cir1{
  	background: #FFA60C;
  }
  .cir2{
  	background:#299EFD; 
  }
  .cir3{
  	background: #FC836E;
  }
  .cir4{
  	background: #11B747;
  }
  .cir5{
    background: #845DD2;
  }
   .bg-home {
    width: 20px; height: 20px;
    background: url('../../assets/css_sprites.png') -175px -143px;
    margin:8px auto;
}
.bg-card {
    width: 19px; height: 15px;
    background: url('../../assets/css_sprites.png') -49px -212px;
        margin:12px auto;

}
.bg-doc {
    width: 17px; height: 22px;
    background: url('../../assets/css_sprites.png') -221px -10px;
        margin:8px auto;

}
.bg-pin {
    width: 23px; height: 23px;
    background: url('../../assets/css_sprites.png') -132px -143px;
        margin:8px auto;

}
.bg-ser {
    width: 19px; height: 19px;
    background: url('../../assets/css_sprites.png') -10px -212px;
        margin:11px auto;

}
 /* .circlebox i{
    font-size: 20px;
    margin-top: 11px;
  }*/
  .tabfont{
  	font-size: 15px;
  }
  .headuser{
	padding-top: 30px;
  }
  .usrbtn{
    font-size: 13px;
    text-align: center;
  	margin-left: 10px;
  	width: 110px;
  	height: 35px;
    line-height: 35px;
  	color: #fff;
  	border:1px solid #fff;
  	border-radius:30px !important;
  	background: rgba(0,0,0,0);
  }
  .usrbtn>div{
    margin:10px 13px;
  }
  .usrbtn:hover{
    color: #333;
    background: #fff;
  }
  .usrbtn:hover .bg-user{
     background: url('../../assets/css_sprites2.png')  -10px -10px;
  }
  .usrbtn:hover .bg-msg{
     background: url('../../assets/css_sprites2.png')  -46px -10px;
  }
  .usrbtn:hover .bg-write{
     background: url('../../assets/css_sprites2.png')  -10px -46px;
  }
  .el-dialog__body .el-input{
    margin-bottom:20px;
  }
  .el-dialog__body .el-row .el-input{
    margin-bottom:10px;
  }

  .codebox img{
    width: 100%;
    height: 40px;
  }
  .smallfont{
    font-size: 12px;
    cursor: pointer;
  }
  .formtip>span:last-child{
    float:right;
  }
  .formbtn{
    width: 255px;
    font-weight: 200;
  }
 .el-input .iconfont{
  display: inline-block;
    margin-top:0;
    margin-left: 5px;
  }
  .headright i{
    cursor: pointer;
  }
  .codebtn{
    text-align: center;
    cursor: pointer;
  }
  
</style>
